<%@ Register TagPrefix="DNN" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke.WebControls"  %>
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.master"%>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">
    <link href="DynamicLoadScript.aspx.css" rel="stylesheet" type="text/css" />
    <script src="DynamicLoadScripts.aspx.js"></script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
			<P class="maindescription">
				This is a page demonstrates the Client API's capability to dynamically load 
				scripts. Three samples are provided. The first demonstrates the loading of a 
				script reference and the loading of an inline script. The second demonstrates 
				the issues involved with loading reference scripts and inline-scripts that
				refer to the reference scripts.  The final sample shows how the ClientAPI
				provides an easy way to workaround this issue.
			</P>
			<DNN:DNNTABSTRIP id="MyDNNTabStrip" runat="server" TabRenderMode="All" DefaultContainerCssClass="tabcontainer"
				DefaultLabel-CssClass="tablabel" DefaultLabel-CssClassHover="tablabelhover" DefaultLabel-CssClassSelected="tablabelselected">
				<DNN:DNNTab id="tab1" runat="server" Label-Text="Sample 1">
					<P class="sampledescription">
						The Load X Variable loads a simple inline-script (var x=123;). The Load 
						Diagnostics Namespace loads a referenced script. Clicking the Test button will 
						output the results of variables that are defined in the loaded script.
					</P>
					<input type="button" value="Load X Variable" onclick="loadx()" /> <input type="button" value="Load Diagnostics Namespace" onclick="loaddiag()" />
					<input type="button" value="Test" onclick="testsample1()" />
				</DNN:DNNTab>
				<DNN:DNNTab id="tab2" runat="server" Label-Text="Sample 2">
					<P class="sampledescription">
						Unfortunatly, the W3C does not define a standard for a load event of a SCRIPT 
						element. Most browsers support either the onreadystatechange or onload event 
						which was originally used. However, at the time of writing Safari did not 
						support this, therefore, some special logic has been added for Safari. Namely, 
						an xmlhttp object is created and performs a request to get the contents of the 
						js file. It will then embed the inline-script into the current document, which 
						causes the script once the text is downloaded to load synchronously.  Opera 
						on the other hand seems to load all script synchronously, and therefore
						will act in the same manner as Safari.
						<br />
						<br />
						The fact that the script references are loaded async and the inline ones are 
						sync is proved by the checking of the existance of the s1 variable directly 
						after the loadScript was called. It will be undefined for all browsers except 
						Opera (as noted above).  Safari is still async since the XMLHTTP object request
						is async.
						<br />
						<br />
						Keep in mind that scripts are verified to only be loaded once. Clicking on the 
						load multiple button will not re-load the reference (async) scripts. It will, 
						however, re-execute the inline scripts.
						<br />
						<br />
						Another thing we need to worry about is how to handle the execution of 
						inline-scripts that are dependent upon referenced (async) scripts. The next 
						sample will demonstrate this capability.
					</P>
					<input type="button" value="Load Multiple Scripts" onclick="loadmultiple()" /> <input type="button" value="Test" onclick="testsample2()" />
				</DNN:DNNTab>
				<DNN:DNNTab id="tab3" runat="server" Label-Text="Sample 3">
					<P class="sampledescription">
						It is possible for us to code the loading of all async scripts first, and only 
						when all have completed, load the in-line (sync) scripts. However, the Client 
						API provides a much easier way to handle this for you.
					</P>
<pre class="samplecode">
//syntax
//dnn.dom.loadScripts([array of ref scripts], [array of inline scripts], [callback function])
dnn.dom.loadScripts(
	['script-1.js', 
	'script-2.js', 
	'script-3.js'], 
	["var o = new script1Object();"],
	allLoaded);
</pre>						

					<input type="button" value="Load Multiple Scripts (dnn.dom.loadScripts)" onclick="loadmultiplewait()" />
					<input type="button" value="Test" onclick="testsample2()" />
				</DNN:DNNTab>
			</DNN:DNNTABSTRIP>
			<hr>
			<br>
			<textarea id="txt" rows="10" cols="100"></textarea>
</asp:Content>